<div
  data-amplify-authenticator
  [attr.data-variation]="variation"
  *ngIf="hasRouteComponent()"
>
  <div data-amplify-container>
    <amplify-slot
      name="header"
      [context]="context"
    ></amplify-slot>
    <div
      data-amplify-router
      [attr.data-amplify-router-content]="hasTabs() ? undefined : ''"
    >
      <amplify-tabs
        (tabChange)="onTabChange()"
        *ngIf="(route === 'signIn' || route === 'signUp') && !hideSignUp"
      >
        <amplify-tab-item
          [title]="signInTitle"
          [active]="route === 'signIn'"
          data-amplify-router-content
        >
          <!-- signIn component -->
          <amplify-slot
            name="sign-in"
            [context]="context"
            *ngIf="route === 'signIn'"
          >
            <amplify-sign-in></amplify-sign-in>
          </amplify-slot>
        </amplify-tab-item>
        <amplify-tab-item
          [title]="signUpTitle"
          [active]="route === 'signUp'"
          data-amplify-router-content
        >
          <!-- signUp component -->
          <amplify-slot
            name="sign-up"
            [context]="context"
            *ngIf="route === 'signUp'"
          >
            <amplify-sign-up></amplify-sign-up>
          </amplify-slot>
        </amplify-tab-item>
      </amplify-tabs>

      <amplify-slot
        name="sign-in"
        [context]="context"
        *ngIf="route === 'signIn' && hideSignUp"
      >
        <amplify-sign-in></amplify-sign-in>
      </amplify-slot>

      <!-- confirmSignUp content -->
      <amplify-slot
        name="confirm-sign-up"
        [context]="context"
        *ngIf="route === 'confirmSignUp'"
      >
        <amplify-confirm-sign-up></amplify-confirm-sign-up>
      </amplify-slot>

      <!-- confirmSignIn content -->
      <amplify-slot
        name="confirm-sign-in"
        [context]="context"
        *ngIf="route === 'confirmSignIn'"
      >
        <amplify-confirm-sign-in></amplify-confirm-sign-in>
      </amplify-slot>

      <!-- setupTotp content -->
      <amplify-slot
        name="setup-totp"
        [context]="context"
        *ngIf="route === 'setupTotp'"
      >
        <amplify-setup-totp></amplify-setup-totp>
      </amplify-slot>

      <!-- forceNewPassword content -->
      <amplify-slot
        name="force-new-password"
        [context]="context"
        *ngIf="route === 'forceNewPassword'"
      >
        <amplify-force-new-password></amplify-force-new-password>
      </amplify-slot>

      <!-- forgotPassword content -->
      <amplify-slot
        name="forgot-password"
        [context]="context"
        *ngIf="route === 'forgotPassword'"
      >
        <amplify-forgot-password></amplify-forgot-password>
      </amplify-slot>

      <!-- confirmResetPassword content -->
      <amplify-slot
        name="confirm-reset-password"
        [context]="context"
        *ngIf="route === 'confirmResetPassword'"
      >
        <amplify-confirm-reset-password></amplify-confirm-reset-password>
      </amplify-slot>

      <!-- verifyUser content -->
      <amplify-slot
        name="verify-user"
        [context]="context"
        *ngIf="route === 'verifyUser'"
      >
        <amplify-verify-user></amplify-verify-user>
      </amplify-slot>

      <!-- confirmVerifyUser content -->
      <amplify-slot
        name="confirm-verify-user"
        [context]="context"
        *ngIf="route === 'confirmVerifyUser'"
      >
        <amplify-confirm-verify-user></amplify-confirm-verify-user>
      </amplify-slot>

      <!-- selectMfaType content -->
      <amplify-slot
        name="select-mfa-type"
        [context]="context"
        *ngIf="route === 'selectMfaType'"
      >
        <amplify-select-mfa-type></amplify-select-mfa-type>
      </amplify-slot>

      <!-- setupEmail content -->
      <amplify-slot
        name="setup-email"
        [context]="context"
        *ngIf="route === 'setupEmail'"
      >
        <amplify-setup-email></amplify-setup-email>
      </amplify-slot>
    </div>

    <amplify-slot
      name="footer"
      [context]="context"
    ></amplify-slot>
  </div>
</div>

<!-- signedIn content is rendered outside authenticator so it's not styled by authenticator -->
<amplify-slot
  name="authenticated"
  [context]="context"
  *ngIf="route === 'authenticated'"
>
  <ng-content></ng-content>
</amplify-slot>